<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>{{year}}年{{month}}月临安区公共机构公务用车油耗情况统计表</h2>
    </div>
    <div class="unitInfo-tableInfo">
      <div class="unitInfo-infoRow">
        <label>填报单位：</label>
        <span>{{carDetail.DepartmentName}}</span>
        <span style="color:red">({{carDetail.State=='0'?'未审':'已审'}})</span>
      </div>
      <div class="unitInfo-infoRow">
        <label>制表：</label>
        <span>{{carDetail.officeAddress}}</span>
      </div>
    </div>
    <div class="unitInfo-tableContent">
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td align="center" valign="middle" width="60">序号</td>
          <td align="center" valign="middle">车牌号</td>
          <td align="center" valign="middle">车型</td>
          <td align="center" valign="middle">本月公里数(千米)</td>
          <td align="center" valign="middle">本月油耗(升)</td>
          <td align="center" valign="middle">百公里油耗(升)</td>
          <td align="center" valign="middle">金额(员)</td>
        </tr>
        <tr :key="i" v-for="(item,i) in carDetail.Details">
          <td align="center" valign="middle">{{i}}</td>
          <td align="center" valign="middle">{{item.Car.Number}}</td>
          <td align="center" valign="middle">{{item.Car.Type}}</td>
          <td align="center" valign="middle">{{item.Kilometres}}</td>
          <td align="center" valign="middle">{{item.FuelConsumption}}</td>
          <td align="center" valign="middle">{{((item.FuelConsumption/item.Kilometres)*100).toFixed(2)}}</td>
          <td align="center" valign="middle">{{item.Amount}}</td>
        </tr>
        <tr>
          <td align="center" valign="middle">操作</td>
          <td valign="middle" colspan='6'>
            <el-radio-group v-model="carDetail.State">
              <el-radio :label="1">已审</el-radio>
              <el-radio :label="0">未审</el-radio>
            </el-radio-group>
          </td>
        </tr>
      </table>
      <div class="table-footers">
        <div class="tableFooter-row">
          <div class="tableFooter-col">
            <span>单位负责人：</span>
            <span>{{carDetail.Creator.Boss}}</span>
          </div>
          <div class="tableFooter-col" style="padding-left:15px;">
            <span>联系电话：</span>
            <span>{{carDetail.Creator.Telephone }}&nbsp;&nbsp;{{carDetail.Creator.Mobile}}</span>
          </div>
          <div class="tableFooter-col">
          </div>
        </div>
        <div class="tableFooter-row">
          <div class="tableFooter-col">
            <span>填 &nbsp;&nbsp;表 &nbsp;&nbsp;&nbsp;人：</span>
            <span>{{carDetail.Creator.LoginName}}</span>
          </div>
          <div class="tableFooter-col" style="padding-left:15px;">
            <span>传真：</span>
            <span>{{carDetail.Creator.Fax}}</span>
          </div>
          <div class="tableFooter-col" style="text-align:right;">
            <span>填报日期：</span>
            <span>{{carDetail.CreatedAt}}</span>
          </div>
        </div>
      </div>
      <div class="table-button">
        <el-button type="primary" size="mini" @click="submitEnergy">保存</el-button>
        <el-button type="info" size="mini" @click="$router.push('/carOil')">关闭</el-button>
        <el-button size="mini" @click="print()">打印</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: '',
      month: '',
      departName: '',
      carDetail: {
        Creator: {
          Fax: '',
          LoginName: '',
          Telephone: '',
          Mobile: '',
          Boss: ''
        }
      }
    }
  },
  methods: {
    async getDetail() {
      const result = await this.$get('/api/CarFuel', { departmentName: this.departName, year: this.year, month: this.month })
      this.carDetail = result
      console.log(result, '1255')
    },
    print() {
      if (window.print != null) {
        window.print();
      }
      else {
        this.$message({
          message: '您没有安装打印机，请安装后继续！',
          type: 'error'
        })
      }
    },
    async submitEnergy() {
      try {
        const resutl = await this.$post('/api/CarFuel/check/' + this.carDetail.Id, {
          State: this.carDetail.State,
          Remark: ''
        })
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getDetail();
      }
      catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  created() {
    this.showHome.isShow = false;
    this.year = this.$route.params.year
    this.month = this.$route.params.month
    this.departName = this.$route.params.department
    this.getDetail()
  }
}
</script>
<style lang="scss" scoped>
.unitInfo-tableContainer {
  width: 100%;
  padding: 20px 15px;
}

.unitInfo-tableTitle {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
  h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  span {
    font-size: 16px;
    font-weight: bold;
  }
}

.unitInfo-tableInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
  color: #606266;
}

.unitInfo-tableContent {
  width: 100%;
  table {
    color: #606266;
    border: 1px solid #ebeef5;
    td {
      padding: 8px 3px;
    }
  }
}

.table-footers {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  .tableFooter-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 25px;
    .tableFooter-col {
      flex: 1;
    }
  }
}

.table-button {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>


